import { useEffect, useState } from "react";
import { S2DataConfig, S2Options, CellType, TooltipOperatorMenuInfo, S2CellType, HeaderIconClickParams } from "@antv/s2";
import  citys from '../data/citys.json';
import { cloneDeep } from "lodash";
import { Button } from 'antd';
import { CaretUpOutlined, CaretDownOutlined, MinusOutlined } from '@ant-design/icons';
import styles from './TablePage.less';

import { SheetComponent } from '@antv/s2-react';
import type { SheetComponentOptions } from '@antv/s2-react';
import '@antv/s2-react/dist/s2-react.min.css';

import { Menu } from 'antd';

export default function BaseTable() {

    const [cityData, setCityData] = useState<any[]>([]);

    const [dataCfg, setDataCfg] = useState<S2DataConfig>({
        fields: {
            columns: [
                "cityName", "ranking", "peopleCount", "gdp", 
                "industryType", "avgSalary", "level", "area", 
                "region", "avgAge", "sexualRate", "empRate"
            ],
        },
        meta: [
            { field: "cityName", name: "城市名" },
            { field: "ranking", name: "城市排名" },
            { field: "peopleCount", name: "人口" },
            { field: "gdp", name: "GDP(亿元)" },
            { field: "industryType", name: "产业类型" },
            { field: "avgSalary", name: "平均薪资(元)" },
            { field: "level", name: "城市等级" },
            { field: "area", name: "城市面积(平方千米)" },
            { field: "region", name: "区域" },
            { field: "avgAge", name: "平均年龄" },
            { field: "sexualRate", name: "男女比例" },
            { field: "empRate", name: "就业率(%)" },
        ],
        data: cityData,
        // 配置初始排序，和点击排序不是一件事
        sortParams: [
            {
                sortFieldId: 'area',
                sortMethod: 'DESC',
                sortByMeasure: 'area',// 对明细表通常与 sortFieldId 相同
            }
        ],
    });

    const options: SheetComponentOptions = {
        // width: 800,
        // height: 500,
        seriesNumber: {
            enable: true,
            text: "序号",
        },
        frozen: {
            rowCount: 1,
            colCount: 2,
            trailingColCount: 1,
        },
        style: {
            colCell: {
                widthByField: {
                    peopleCount: 150,
                    industryType: 180,
                    level: 150,
                    area: 150,
                    gdp: 150,
                    avgSalary: 150,
                    region: 150,
                },
            },
        },
        placeholder: {
            cell: "-",
            empty: {
                icon: "Empty",
                description: "暂无数据",
            },
        },
        showDefaultHeaderActionIcon: true,
        tooltip: {
            enable: true,
            style: {
                minWidth: '100px',
            },
            operation: {
                tableSort: true,
                hiddenColumns: false,//不显示tooltip中隐藏项
                menu: {
                    // 定义这部分，点击表头其它区域就会弹出菜单
                    // items: [
                    //     {
                    //         key: "asc",
                    //         label: "升序",
                    //         // icon: "SortUp",
                    //         icon: <CaretUpOutlined />,
                    //         // onClick: (info, cell) => {
                    //         // }
                    //     },
                    //     {
                    //         key: "desc",
                    //         label: "降序",
                    //         // icon: "SortDown",
                    //         icon: <CaretDownOutlined />,
                    //         // onClick: (info, cell) => {
                    //         // }
                    //     },
                    // ],
                    render: (props) => (
                        // 如果需要自己实现Menu，就一定要使用props.onClick，否则就没有点击排序效果了
                        <Menu
                            onClick={props.onClick}
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            mode="inline"
                            items={[
                                {
                                    key: 'asc',
                                    label: '升序',
                                    icon: <CaretUpOutlined />
                                },
                                {
                                    key: 'desc',
                                    label: '降序',
                                    icon: <CaretDownOutlined />
                                },
                                {
                                    key: 'none',
                                    label: '不排序',
                                    icon: <MinusOutlined />
                                }
                            ]}
                        />
                    ),

                    // 如果使用默认的Props构建Menu，点击就有排序效果
                    // 如果自己构建Menu属性，点击就没有排序效果
                    // render: (props) => (<Menu {...props} />)
                },
            },
        },
    };

    useEffect(() => {
        const copy = cloneDeep(dataCfg);
        copy.data = cityData || [];
        setDataCfg(copy);
    }, [cityData]);

    return (
        <div className={styles.container}>
            <SheetComponent
                // 设置宽高自适应，传true默认只有宽度自适应
                adaptive={{width: true, height: true}}
                sheetType="table"
                dataCfg={dataCfg}
                options={options}
                onRangeSort={(params) => {  
                    console.log('排序参数:', params);  
                }}  
                onRangeSorted={(event) => {  
                    console.log('排序完成');  
                }}  
            />

            {!cityData?.length && (
                <Button style={{ position: 'absolute', top: 64, left: 60 }} onClick={() => {
                    setCityData(citys);
                }}>加载数据</Button>
            )}
        </div>
    );
}
